<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0057: Cairo I – The Basics of Drawing | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0057: Cairo I – The Basics of Drawing" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="GTK Tutorial - introduction to drawing with Cairo." />
<meta property="og:description" content="GTK Tutorial - introduction to drawing with Cairo." />
<link rel="canonical" href="http://localhost:4000/posts/0057-cairo-i-the-basics.html" />
<meta property="og:url" content="http://localhost:4000/posts/0057-cairo-i-the-basics.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-07-30T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0057: Cairo I – The Basics of Drawing" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-07-30T00:00:00-04:00","datePublished":"2019-07-30T00:00:00-04:00","description":"GTK Tutorial - introduction to drawing with Cairo.","headline":"0057: Cairo I – The Basics of Drawing","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0057-cairo-i-the-basics.html"},"url":"http://localhost:4000/posts/0057-cairo-i-the-basics.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/cairo.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-07-30T00:00:00-04:00" itemprop="datePublished">Tuesday, July 30, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0057-cairo-i--the-basics-of-drawing">0057: Cairo I – The Basics of Drawing</h1>

<p>Today we’re going to put the MVC series aside for a few weeks while we dive into another series on a topic near and dear to my heart… graphics. We’ll start simple and get more complicated as we go. But first, we need to look at some foundation stuff…</p>

<h2 id="the-imports">The Imports</h2>

<p>To do anything with <em>Cairo</em>, you need to add these two lines to your list of import statements:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="n">cairo</span><span class="p">.</span><span class="n">Context</span><span class="p">;</span>
<span class="k">import</span> <span class="n">gtk</span><span class="p">.</span><span class="n">DrawingArea</span><span class="p">;</span>
</code></pre></div></div>

<p>Perhaps surprisingly, you won’t need to add a lot more to this list for most <em>Cairo</em> operations.</p>

<h2 id="the-drawingarea">The DrawingArea</h2>

<p>Yup, it’s like an overhead projector. You prep whatever you’re going to show off to one side, then slap it onto the projector to shine it on the wall. Same thing here, and setting them up? Nothing to it:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">MyDrawingArea</span> <span class="p">:</span> <span class="n">DrawingArea</span>
<span class="p">{</span>
	<span class="c1">//               R   G    B    Alpha</span>
	<span class="kt">float</span><span class="p">[]</span> <span class="n">rgba</span> <span class="p">=</span> <span class="p">[</span><span class="mf">0.3</span><span class="p">,</span> <span class="mf">0.6</span><span class="p">,</span> <span class="mf">0.2</span><span class="p">,</span> <span class="mf">0.9</span><span class="p">];</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="n">addOnDraw</span><span class="p">(&amp;</span><span class="n">onDraw</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
</code></pre></div></div>

<p>Ignoring the <code class="language-plaintext highlighter-rouge">rgbaColor</code> array for the moment, to prepare a <code class="language-plaintext highlighter-rouge">DrawingArea</code>, you just:</p>

<ul>
  <li>instantiate it,</li>
  <li>write a callback function and</li>
  <li>hook up the <code class="language-plaintext highlighter-rouge">onDraw</code> signal to call the callback.</li>
</ul>

<p>That’s it. But anything you plan to show with the <code class="language-plaintext highlighter-rouge">DrawingArea</code> ‘projector’ you’ll need to prep first. And you do that off-screen with the <code class="language-plaintext highlighter-rouge">DrawingArea</code>’s constant companion…</p>

<h2 id="the-context">The Context</h2>

<p>This is like a paste-up board. You take bits and pieces of images, shapes, lines, etc., mix in some color and build the image you want to show on the <code class="language-plaintext highlighter-rouge">DrawingArea</code>. When it’s ready, you call one of the <code class="language-plaintext highlighter-rouge">Context</code>’s many functions to slap your results onto the <code class="language-plaintext highlighter-rouge">DrawingArea</code> projector.</p>

<p>But to show this, we need an example, so let’s start with something simple like…</p>

<h2 id="a-simple-fill">A Simple Fill</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/018_cairo/cairo_01.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/018_cairo/cairo_01_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/018_cairo/cairo_01_fill_surface.d" target="_blank">here</a>.
	</div>
</div>

<p>Let’s start by looking at the callback function… which is where the fill is done:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">bool</span> <span class="n">onDraw</span><span class="p">(</span><span class="n">Scoped</span><span class="p">!</span><span class="n">Context</span> <span class="n">context</span><span class="p">,</span> <span class="n">Widget</span> <span class="n">w</span><span class="p">)</span>
<span class="p">{</span>
	<span class="n">context</span><span class="p">.</span><span class="n">setSourceRgba</span><span class="p">(</span><span class="n">rgba</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">rgba</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="n">rgba</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="n">rgba</span><span class="p">[</span><span class="mi">3</span><span class="p">]);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">paint</span><span class="p">();</span>

	<span class="k">return</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
		
<span class="p">}</span> <span class="c1">// onDraw()</span>
</code></pre></div></div>

<p>Here, all we do is:</p>

<ul>
  <li>set the color, and</li>
  <li>fill the entire <code class="language-plaintext highlighter-rouge">DrawingArea</code>.</li>
</ul>

<p>And that is <em>Cairo</em> drawing at its simplest.</p>

<p>A Technical Note: You’ll notice the <code class="language-plaintext highlighter-rouge">onDraw()</code> function’s first argument is <code class="language-plaintext highlighter-rouge">Scoped!Context</code>. <code class="language-plaintext highlighter-rouge">Scoped!</code> is a <em>GtkD</em> reflection of <code class="language-plaintext highlighter-rouge">D</code>’s <code class="language-plaintext highlighter-rouge">scoped()</code> function and all it means is that the <code class="language-plaintext highlighter-rouge">Context</code> will be destroyed automatically when we’re done with it. It has to be done this way because it’s created automatically.</p>

<p>Now let’s look at a second simple example…</p>

<h2 id="drawing-a-line">Drawing a Line</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/018_cairo/cairo_02.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/018_cairo/cairo_02_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/018_cairo/cairo_02_draw_line.d" target="_blank">here</a>.
	</div>
</div>

<p>The only thing different about this line-drawing example compared to the fill example is the callback function:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">bool</span> <span class="n">onDraw</span><span class="p">(</span><span class="n">Scoped</span><span class="p">!</span><span class="n">Context</span> <span class="n">context</span><span class="p">,</span> <span class="n">Widget</span> <span class="n">w</span><span class="p">)</span>
<span class="p">{</span>
	<span class="n">context</span><span class="p">.</span><span class="n">setLineWidth</span><span class="p">(</span><span class="mi">3</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">45</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">249</span><span class="p">,</span> <span class="mi">249</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">stroke</span><span class="p">();</span>
		
	<span class="k">return</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
		
<span class="p">}</span> <span class="c1">// onDraw()</span>
</code></pre></div></div>

<p>In this operation, we do four things:</p>

<ul>
  <li>set the width of the line to draw,</li>
  <li>move the ‘pen’ to where the line starts,</li>
  <li>decide where the line will end, and</li>
  <li>stroke it.</li>
</ul>

<p>But what if you want to draw…</p>

<h2 id="multiple-lines-with-rounded-ends">Multiple Lines with Rounded Ends</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img4" src="../images/screenshots/018_cairo/cairo_03.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal4" class="modal">																<!-- modal# -->
				<span class="close4">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img44" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal4");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img4");														// img#
			var modalImg = document.getElementById("img44");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close4")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img5" src="../images/screenshots/018_cairo/cairo_03_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal5" class="modal">																			<!-- modal# -->
				<span class="close5">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img55" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal5");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img5");																	// img#
			var modalImg = document.getElementById("img55");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close5")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!---------- filename (below) ---------->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/018_cairo/cairo_03_draw_rounded_lines.d" target="_blank">here</a>.
	</div>
</div>

<p>In this third, multi-line example, we just add a few preparatory commands to get the Context set up:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">bool</span> <span class="n">onDraw</span><span class="p">(</span><span class="n">Scoped</span><span class="p">!</span><span class="n">Context</span> <span class="n">context</span><span class="p">,</span> <span class="n">Widget</span> <span class="n">w</span><span class="p">)</span>
<span class="p">{</span>
	<span class="n">context</span><span class="p">.</span><span class="n">setLineWidth</span><span class="p">(</span><span class="mi">10</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">setLineCap</span><span class="p">(</span><span class="n">CairoLineCap</span><span class="p">.</span><span class="n">ROUND</span><span class="p">);</span>	
	<span class="n">context</span><span class="p">.</span><span class="n">setLineJoin</span><span class="p">(</span><span class="n">CairoLineJoin</span><span class="p">.</span><span class="n">ROUND</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">249</span><span class="p">,</span> <span class="mi">249</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">450</span><span class="p">,</span> <span class="mi">15</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">450</span><span class="p">,</span> <span class="mi">249</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">stroke</span><span class="p">();</span>
		
	<span class="k">return</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
		
<span class="p">}</span> <span class="c1">// onDraw()</span>
</code></pre></div></div>

<p>It’s mostly just more of what we’ve already been doing, but there are two new lines in there that make the ends and angles of the lines rounded.</p>

<p>So you know what all the options are for <code class="language-plaintext highlighter-rouge">setLineCap()</code>, here they are:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">CairoLineCap.BUTT</code>,</li>
  <li><code class="language-plaintext highlighter-rouge">CairoLineCap.ROUND</code>, and</li>
  <li><code class="language-plaintext highlighter-rouge">CairoLineCap.SQUARE</code>.</li>
</ul>

<p>And the options for <code class="language-plaintext highlighter-rouge">setLineJoin()</code> are:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">CairoLineJoin.MITER</code>,</li>
  <li><code class="language-plaintext highlighter-rouge">CairoLineJoin.ROUND</code>, and</li>
  <li><code class="language-plaintext highlighter-rouge">CairoLineJoin.BEVEL</code>.</li>
</ul>

<p>One other note: The set of <code class="language-plaintext highlighter-rouge">lineTo()</code> calls will draw a continuous line with three legs. If instead you want two separate lines, you would change the second <code class="language-plaintext highlighter-rouge">lineTo()</code> call to a <code class="language-plaintext highlighter-rouge">moveTo()</code> like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">context</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
<span class="n">context</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">249</span><span class="p">,</span> <span class="mi">249</span><span class="p">);</span>
<span class="n">context</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">450</span><span class="p">,</span> <span class="mi">15</span><span class="p">);</span>
<span class="n">context</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">450</span><span class="p">,</span> <span class="mi">249</span><span class="p">);</span>
<span class="n">context</span><span class="p">.</span><span class="n">stroke</span><span class="p">();</span>
</code></pre></div></div>

<h2 id="conclusion">Conclusion</h2>

<p>So, to use a <code class="language-plaintext highlighter-rouge">DrawingArea</code>, we now know we need to instantiate it and hook up the <code class="language-plaintext highlighter-rouge">onDraw</code> signal. Also, we need a behind-the-scenes <code class="language-plaintext highlighter-rouge">Context</code> (automatically supplied in most cases) for preparing any drawing before it hits the <code class="language-plaintext highlighter-rouge">DrawingArea</code>.</p>

<p>Next time we continue with <em>Cairo</em> and look at rectangles. Until then…</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0056-mvc-ix-a-combobox-with-flair.html">Previous: ComboBox with Flair</a>
	</div>
	<div style="float: right;">
		<a href="./0058-cairo-ii-rectangles.html">Next: Cairo Rectangles</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0057-cairo-i-the-basics.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
